<!doctype html>
<html>
<link rel="stylesheet" href="./index.css" />
<link rel="stylesheet" href="/assets/styles/common.css" />

<div class="container" style="padding: 50px;">
  <!--Корневой элемент слайдера-->
  <div class="slider">

    <!--Ползунок слайдера с активным значением-->
    <div class="slider__thumb" style="left: 50%;">
      <span class="slider__value">2</span>
    </div>

    <!--Заполненная часть слайдера-->
    <div class="slider__progress" style="width: 50%;"></div>

    <!--Шаги слайдера-->
    <div class="slider__steps">
      <span></span>
      <span></span>
      <span class="slider__step-active"></span>
      <span></span>
      <span></span>
    </div>
  </div>

</div>

</html>
